<template>
  <div>
    <div v-show="!isAdd" class="main">
      <div style="display: block;overflow: hidden;">
        <el-button type="primary" style="float: left" @click="toAdd">新增</el-button>
        <el-button type="primary" style="float: right;" @click="getList">搜索</el-button>
        <el-input style="float:right;display: inline-block;width: 200px" v-model="groupName"
                  placeholder="请输入岗位名称"></el-input>
      </div>
      <el-table :data="list" border style="width: 100%;margin-top: 20px">
        <el-table-column width="50" prop="id" label="序号"></el-table-column>
        <el-table-column prop="groupName" label="岗位名称"></el-table-column>
        <el-table-column prop="accountCount" label="关联账号数">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <span @click="toAdd(scope.row)">{{$t('action.edit')}}</span>
            <span @click="toDel(scope.row)">{{$t('action.delete')}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="float: right;margin: 10px 0" background pageZize="10" @current-change="getList"
                     layout="prev, pager, next" :total="count">
      </el-pagination>
    </div>
    <AddPost v-if="isAdd" :id="postId" @closePop="close"></AddPost>
  </div>
</template>

<script>
  import util from "@/utils/util";
  import AddPost from "./model/AddPost";
  export default {
    name: "index",
    components: {AddPost},
    props:["groupName"],
    data() {
      return {
        isAdd:false,
        count:0,
        list: [],
        changeSortIndex:null,
        postId:null
      }
    },
    created() {
      this.changeSortIndex = util.changeSortIndex();
      this.init(this.$route.query.groupName || this.groupName)
    },
    methods: {
      init(groupName){
        this.getList(groupName);
      },
      getList(groupName) {
        this.$api.account.getPostList({groupName:groupName?groupName+":":""}).then(
          res => {
            this.list = res.data.list;
            this.count = res.data.count;
          }
        )
      },
      toAdd(){
        this.isAdd = true
      },
      toDel(){},
      close(data){
        this.isAdd = false
      },
    }
  }
</script>

<style lang="scss" scoped>

  .main {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 5px;
    overflow: hidden;
  }

  .el-table {
    table-layout: fixed;
    margin-top: 30px;
  }

  .cell {
    span {
      display: inline-block;
      margin-right: 8px;
      font-size: 12px;
      min-width: 50px;
      box-sizing: border-box;
      text-align: center;
      padding: 2px 10px;
      background-color: #f0f0f0;
      border-radius: 3px;
      cursor: pointer;
    }

    span.btn-normal {
      color: #2a75ed;
    }

    span.btn-danger {
      color: #911b12;
    }
  }
</style>
